Github+Hexo博客搭建小白教程（一）

点击上方“果果小师弟”，选择“置顶/星标公众号”

干货福利，第一时间送达！

阅读须知：文章较长主要针对小白，本人电子信息工程专业，目前只学习了C语言编程，对网站的开发几乎为零，所以写次文章记录搭建过程，供后来者参考借鉴。每一步很详细，建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看，基础较不好或者为零的小伙伴建议从头开始，每一个步骤都不要遗漏。

前言

你了解Hexo吗？ Hexo是一个静态博客框架，基于Node.js，将Markdown文章通过渲染引擎，生成一个静态网页，再结合Git命令（ssh），Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

首先，你至少要了解一些GitHub是什么，要会创建自己的GitHub账号。因为我是电子信息专业，所以在这之前我还不知道GitHub是啥，所以就去B站找了相关教程。因为GitHub全都是英文，所以看起来比较复杂，建议大家使用谷歌浏览器，自带翻译。

主题介绍

原主题特性

- 简单漂亮，文章内容美观易读

- Material Design 设计

- 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现

- 首页轮播文章及每天动态切换 Banner图片

- 瀑布流式的博客文章列表

- 时间轴式的归档页

- 丰富的关于我页面

- 可自定义的数据的友情链接页面

- 支持文章置顶和文章打赏

- 支持 MathJax

- TOC目录

- 可设置复制文章内容时追加版权信息

 增加的工作或特性

- 加入图片懒加载功能，在根目录配置文件开启和关闭    

- 增加留言板功能         

- 在关于板块,加入简历功能页  

- 增加视听[视觉听觉影音]板块      

- 支持emoji表情，用`markdown emoji语法书写直接生成对应的表情。 

- 增加网站运行时间显示  

- 增加动漫模型    

- 整体替换Banner图片和文章特色图片   

- 增加分类相册功能       

- 去掉标签页,将其合并至分类页中           

- 修改了一些控件的参数        

- 添加页面樱花飘落动效          

- 添加鼠标点击烟花爆炸动效  

- 加入天气接口控件   

- 加入鼠标点击文字特效   

- 添加页面雪花飘落动效         

- 添加在线聊天插件       

- 运行命令

- hexo clean（清除生成文件）

- hexo g（生成网页）

- hexo s（本地预览）

- hexo d（部署）

---

 一、博客环境搭建

本文系统环境信息：

Win10专业版，64位（10.0 版本18362）

Node.js：12.13.0 

Git：2.24.0

修改配置文件要用到的软件：

Visual Studio Code：适合有开发基础的程序员，非常好用

1. 下载Git和Node.js

1.1 Node.js的安装与配置

首先去Node.js官网 下载node.js的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤

下载好与电脑系统对应的安装程序后，开始安装流程：

1.打开下载好的Node.js安装程序，点击Next，进行下一步的安装

2.将”I accept the terms in the License Agreement”前面的复选框勾选，同意安装协议，再点击Next，进行下一步操作

3.选择Node.js安装程序的安装位置，在这里我以”C:\Program Files\nodejs"为例，点击Next，进入下一步操作；

4.选择安装的模块和功能，这里全部安装，并添加到系统环境变量 ，继续点击Next，进入下一步操作

5.这一步可以跳过，这个选项的意思是安装一些编译本地模块的工具，比如python，C/C++等，点击Next，进入下一步；

6.点击”Install”，等待Node.js安装完成；

7.当看到下图所显示的情况，Node.js就成功安装完毕。

1.2 Git的安装与配置

为啥要安装Git？这个就相当于你电脑的CMD命令程序。我们安装这个后就不用电脑的CMD命令了直接操作这个即可。首先就是去[Git](https://git-scm.com/)官网下载Git，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤

1.下载好Git的安装包，开始安装，打开安装包，出现如图的界面，点击Next：

2.选择你要安装的位置，我以C盘为例，路径为图中所示，安装到其他位置的话，点击Browse，选择你要安装的位置，然后点击Next，进入下一步：

3.选择你是否创建桌面快捷方方式，其他默认即可，点击Next，进入下一步：

4.是否将Git快捷方式的目录加入开始菜单栏

5.这个是选择文本编辑器的方式，默认是Vim，也可以选择其他的方式，自主选择，在这里我选择的Vim默认方式。选择好文本编辑器的方式后，点击Next，进入下一个流程

6.选择安装 Git 时对环境变量PATH的影响，第一种影响较小，第三种会影响到Windows的自带工具，默认勾选中间项，建议不要修改，直接点击 “Next” 继续安装：

7.选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，可保持默认选项，点击 “Next” 继续安装：

8.选择提交与拉取记录时，对换行符的处理方式，若无特殊需要，默认选择即可，点击 “Next” 继续安装：

9.选择模拟终端软件（即命令行窗口软件），若无特殊需要，可默认选择，点击 “Next” 继续安装：

10.最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击 “Install” 即可完成安装：

11.安装完成

12.回到桌面，点击鼠标右键，会出现两个选项`Git GUI Here`和`Git Bash Here`，在打开Cmd(Win+R)，分别输入`git`和`git --version`，如果出现如下图的情况，即安装成功！

END

---

往期精彩回顾

微信公众号：果果小师弟
关注可了解获取更多的免费资料;
如果你觉得文章对你有帮助，转发分享，欢迎赞赏

最后

10T资源大放送！包括但不限于：C/C++，Linux，Python，Java，PHP，人工智能，PCB、FPGA、DSP、单片机、等等！在公众号内回复「更多资源」，即可免费获取，期待你的关注！！！